import React, { useEffect, useState } from 'react';
import { Input, Form,Button } from 'antd';
import styles from './index.less'
function SettingArea() {
  const [selectItem, setSelectItem] = useState({});
  const [list, setList] = useState([]);
  const [form] = Form.useForm();

  const onMessage = (e) => {
    const { type } = e.data;
    switch (type) {
      case 6:
        console.log('SettingArea', e.data);
        const { list, index, id } = e.data;
        setSelectItem(list?.[index]);
        setList([...list]);
        return;
    }
  };
  useEffect(() => {
    window.addEventListener('message', onMessage);
    return () => {
      window.removeEventListener('message', onMessage);
    };
  }, []);
  const onChange=(e)=>{
    console.log("onChange",e)
  }
  return (
    <div className={styles.settingArea}>
       <input  onBlur={()=>console.log("=======>")}/>
       <Form
           form={form}
          autoComplete="off"
          layout="vertical"

      >
     
        {selectItem?.config&&selectItem?.config.map((item,index) => {
          return (
             <Form.Item
               key={index}
               name={item?.key}
              label={item?.title}
              type={item?.type}
            >
              <Input onChange={onChange}/>
            </Form.Item>
          );
        })}
      </Form>
    </div>
  );
}
export default SettingArea;
